<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学生管理</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
	<style>
		/* .search_img {
			position: absolute;
			right: 3%;
		} */
		.filter-container {
			display: inline-block;
			flex-wrap: wrap;
			/* 允许换行 */
			gap: 10px;
			/* 输入框之间的间距 */
			
		}

		.import_model {
			margin-top: -35px;
			margin-left: 130px;
		}

		.table {
			width: 100%;
			margin-left: 0;
		}

		.five {
			max-height: 55px !important;
			min-width: 130px !important;
			padding: 0;
		}

		.three {
			min-width: 100px;
			width: 9%;
		}

		.phone {
			color: blue;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.nickname {
			position: absolute;
			left: 40px;
			bottom: calc((100% - 35px) / 2);
			width: 80px;
			text-align: left;
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.untying {
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			font-size: 12px;
			cursor: pointer;
			color: #9F9F9F;
		}

		.img-box {
			width: 35px;
			height: 35px;
			display: inline-block;
			padding: 0;
		}

		.phone {
			display: inline-block;
		}

		.header {
			width: 35px;
			height: 35px;
			position: absolute;
			left: 3px;
			bottom: calc((100% - 35px) / 2);
			display: inline-block;
			border-radius: 50%;
		}

		.choose-class {
			width: 94%;
			height: 35px;
			margin-left: 3%;
			margin-top: 35px;
		}

		.popup {
			width: 330px;
			height: 300px;
			/* margin: calc((100% - 300px) / 6) calc((100% - 300px) / 2); */
		}

		.popup-title {
			padding-left: 100px;
		}

		.relatives-info {
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			vertical-align: text-top;
			text-align: left;
		}

		.relatives-name {
			text-indent: 1em;
			width: calc(100% - 13em);
		}

		.relatives-relation {
			width: 5em;
		}

		.info2 {
			margin-top: 0.5em;
			vertical-align: text-top;
		}

		.relatives_info {
			width: 3.5em;
			display: inline-block;
			vertical-align: text-top;
		}

		.relatives_info img {
			height: 3.5em;
			width: 100%;
			border-radius: 50%;
			margin: 0 0.25em;
		}

		.uihf {
			display: flex;


		}

		.search {
			position: relative;
			right: 0px;
			margin: 5px 10px 0 0;
		}

		.enroll-button {
			display: inline-block;
			padding: 10px 20px;
			background-color: #69bbf4;
			/* 绿色背景 */
			color: white;
			/* 字体颜色为白色 */
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			border-radius: 5px;
			/* 圆角效果 */
			box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
			/* 阴影效果 */
			transition: background-color 0.3s ease;
			/* 鼠标悬停时的平滑过渡 */
		}

		.enroll-button:hover {
			background-color: #c52626;
			/* 悬停时更深的绿色 */
		}

		.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-height: 90%;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 1000;
}

.modal-content {
	padding: 20px;
    max-width: 80%; /* 最大宽度为屏幕宽度的 80% */
    width: auto; /* 根据内容自适应 */
    margin: 0 auto;
}


.follow-up-table td {
    max-width: 300px; /* 限制列宽 */
    word-wrap: break-word; /* 强制文本换行 */
    text-overflow: ellipsis; /* 溢出省略号（可选） */
}

.modal {
	max-width: 40%;
    max-height: 80%;
    /* overflow: auto; */
}

		/* 弹窗标题 */
		.modal-content h3 {
			margin-bottom: 10px;
			text-align: center;
			font-size: 20px;
			color: #333;
		}

		/* 弹窗标签 */
		.modal-content label {
			display: block;
			margin-bottom: 8px;
			font-size: 14px;
		}

		/* 弹窗输入框 */
		.modal-content textarea,
		.modal-content input {
			width: 99%;
			padding: 10px;
			margin-bottom: 15px;
			border: 1px solid #ccc;
			border-radius: 4px;
			font-size: 14px;
		}

		/* 弹窗按钮 */
		.modal-content button {
			padding: 10px 20px;
			background-color: #69bbf4;
			color: white;
			font-weight: bold;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		.modal-content button:hover {
			background-color: #4a9dc1;
			/* 悬停时的颜色 */
		}

		/* 取消按钮 */
		.modal-content .cancel-btn {
			background-color: #f44336;
			/* 红色取消按钮 */
		}

		.modal-content .cancel-btn:hover {
			background-color: #e53935;
			/* 悬停时的颜色 */
		}

		/* 在弹窗外部点击时关闭弹窗 */
		.modal-content .close-btn {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 18px;
			color: #aaa;
			cursor: pointer;
		}

		/* 关闭按钮的悬停效果 */
		.modal-content .close-btn:hover {
			color: #333;
		}
		.follow-up-table {
    width: 100%; /* 表格宽度适应弹窗 */
    border-collapse: collapse; /* 合并表格边框 */
    table-layout: fixed; /* 固定表格布局，确保每列按比例分配宽度 */
}

.follow-up-table th,
.follow-up-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    word-wrap: break-word; /* 保证文字自动换行 */
    word-break: break-word; /* 强制长单词换行 */
    white-space: normal; /* 禁止单行显示，启用换行 */
}

.follow-up-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.modal-content {
    padding: 20px;
    max-height: 80vh; /* 限制高度 */
    overflow-y: auto; /* 长内容滚动 */
}


		[v-if] {
			display: none;
		}
		button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    background: #69bbf4;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">

		<div class="filter-container">
			<div class="add" v-if="able.add">
				<a href="educational_student_zhaos_item_school.html" style="color: white">添加学生</a>
			</div>
			<div class="refresh" onclick="location.reload()">刷新</div>
			<div class="uihf">
				<input placeholder="请输入学生姓名" class="search" v-model="search.name" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
				<input placeholder="请输入家长姓名" class="search" v-model="search.parentNames" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
				<input placeholder="请输入手机号" class="search" v-model="search.bindCode" @keyup.enter="getData0"
					style="width: 120px; height: 33px;">
				<input placeholder="请输入微信号" class="search" v-model="search.wechatId" @keyup.enter="getData0"
					style=" width: 120px; height: 33px;">
				<select class="search" v-model="search.schoolId"  @change="fetchCourses">
					<option :value="undefined">请选择校区</option>
					<option v-for="school in schools" :key="school.id" :value="school.id" v-text="school.name">
					</option>
				</select>
				
				<select class="search" v-model="search.courseId">
					<option :value="undefined">请选择咨询课程</option>
					<option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
					</option>
				</select>

				<v-select
		v-model="search.people"
		class="search666"
		:options="peoples"
		label="name"
		:reduce="people => people.id"
		placeholder="请选择跟进人"
		:filterable="true"
		:clearable="true"
		style="width: 150px; display: inline-block;"
	  ></v-select>
				<!-- <select class="search" v-model="search.people">
					<option :value="undefined">请选择跟进人</option>
					<option v-for="people in peoples" :key="people.id" :value="people.id" v-text="people.name">
					</option>
				</select> -->
				<select class="search" v-model="selectedDataSourceIndex">
					<option :value="null">选择数据源</option>
					<option v-for="(source, index) in dataSource" :key="index" :value="index">
						{{ source }}
					</option>
				</select>
				<select class="search" v-model="selectedDataStatusIndex">
					<option :value="null">选择数据状态</option>
					<option v-for="(status, index) in dataStatus" :key="index" :value="index">
						{{ status }}
					</option>
				</select>
				<select class="search" v-model="selectedDataIntentIndex">
					<option :value="null">选择数据意向</option>
					<option v-for="(intent, index) in dataIntent" :key="index" :value="index">
						{{ intent }}
					</option>
				</select>
				<img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0" />
			</div>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>
		<div class="table " style="margin-left: 2%;width: 96%; overflow: auto;">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th class="one">序号</th>
						<th class="one">学员姓名</th>
						<th class="three">性别</th>
						<th class="one">咨询课程</th>
						<th class="one">关联校区</th>
						<th>就读学校</th>
						<th class="one">家长姓名</th>
						<th class="one">联系电话</th>
						<th class="one">微信号</th>
						<th class="one">数据来源</th>
						<th class="one">数据状态</th>
						<th class="one">数据意向</th>
						<th class="one">推广人员</th>
						<th class="one">跟进人</th>
						<th class="one">跟进记录</th>
						<th class="one">重要跟进记录</th>
						<th class="one">报名</th>
						<th class="three">编辑/删除</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(student,index) in list" :key="student.id">
						<td>
							<input type="checkbox" class="check-box" v-model="student.checked">
						</td>
						<td class="one"><span v-text="index+1"></span></td>
						<td class="one" v-text="student.name"></td>
						<td class="one" v-text="student.sex?'男':'女'"></td>
						<td class="one" v-text="student.courseNames"></td>
						<td class="one" v-text="student.fschoolName"></td>
						<td class="one" v-text="student.schoolName"></td>
						<td class="one">
							{{ student.fatherName }}{{ student.fatherName && student.motherName ? ', ' : '' }}
							{{ student.motherName }}{{ student.motherName && student.grandadName ? ', ' : '' }}
							{{ student.grandadName }}{{ student.grandadName && student.grandmaName ? ', ' : '' }}
							{{ student.grandmaName }}
						</td>
						<td class="one" v-text="student.bindCode"></td>
						<td class="one" v-text="student.wechatId"></td>
						<td class="one" v-text="student.dataSource"></td>
						<td class="one" v-text="student.dataStatus"></td>
						<td class="one" v-text="student.dataIntent"></td>
						<!-- <td class="one photo">
							<img :src="getImg(student.avatar)" alt="" v-if="student.avatar">
						</td> -->
						
						<td class="one" v-text="student.promoterName"></td>
						<td class="one" v-text="student.peopleName"></td>
						<td class="one" >
							<div v-if="Array.isArray(student.followUpRecord) && student.followUpRecord.length > 0">
								<div v-for="(record, index) in student.followUpRecord.slice(0, 3)" :key="index">
								  <span>{{ record.content }} - {{ record.times }} - {{ record.username }}</span>
								</div>
							  </div>
							  <!-- 如果学习记录为空，显示 "暂无记录" -->
							  <div v-else>
								<span>暂无记录</span>
							  </div>
						</td>

						<td>
							<button @click="viewFollowUp(student.id)">查看重要跟进记录</button>
							<button @click="showAddFollowUpModal(student.id)">新增重要跟进记录</button>
						</td>
						
						<td>
							<a :href="'student_enrolment.html?id=' + student.id" class="enroll-button">
								报名
							</a>
						</td>
						<td class="three">
							<div class="option" style="position: relative;">
								
								<div v-if="able.edit" class="edit-icon option-icon"
									style="left: 40%; top:30%;position: absolute;">
									<a :href="'educational_student_zhaos_item_school.html?id='+student.id">
										<img class="img" src="../image/edit.png" height="20" width="20"
											onmouseover="this.src='../image/edit_light.png'"
											onmouseout="this.src='../image/edit.png'" />
									</a>
								</div>
								<div v-if="able.del" class="delete-icon option-icon"
									style="right: 10%; top:30%;position: absolute;">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>

						<div v-if="isModalVisible" class="modal">
							<div class="modal-content">
								<span class="close-btn" @click="closeAddFollowUpModal">&times;</span>
								<h3>新增重要跟进记录</h3>
								<label for="followUpContent">跟进内容：</label>
								<textarea v-model="important.content" rows="4" cols="50"></textarea><br>

								<label for="followUpDate">选择时间：</label>
								<input type="datetime-local" v-model="important.date"><br>

								<button @click="submitFollowUp">确认</button>
								<button class="cancel-btn" @click="closeAddFollowUpModal">取消</button>
							</div>
						</div>

					</tr>
					<tr></tr>
				</tbody>
			</table>
		</div>
		<br>
		<div class="delete" @click="batchDelete" v-if="able.del">批量删除</div>
		<a href="/excel/学生.xls" v-if="able.add">
			<div class="delete long-background-img">下载导入模板</div>
		</a>
		<label class="delete long-background-img" for="file" v-if="able.import">批量导入学生</label>
		<div class="delete long-background-img" v-if="able.export" @click="exports">批量导出学生</div>
		<div v-if="able.edit" class="delete long-background-img" @click="changeClasses">批量分配给跟进人</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
			<li>
				<a v-text="pages"></a>
			</li>
		</ul>
		<div style="float: right;">
			总共{{total}}条记录
			<select class="ui-select init" style="height:32px" v-model="pageSize">
				<option :value="10">每页10条</option>
				<option :value="30">每页30条</option>
				<option :value="100">每页100条</option>
			</select>
		</div>
		<!--遮罩层-->
		<div v-if="popup">
			<div class="model-table5">
				<div class="popup">
					<div class="popup-title">选择分配人员</div>
					<div class="popup-center">
						<v-select placeholder="请选择招生人员" label="name" :options="peoples" :reduce="item=>item.id"
							v-model="toPeopleId"></v-select>
						<button class="sure" @click="sure">确定</button>
						<button class="back" @click="popup=false">取消</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 查看重要跟进记录弹窗 -->
		<div v-if="isFollowUpModalVisible" class="modal">
			<div class="modal-content">
				<span class="close-btn" @click="closeFollowUpModal">&times;</span>
				<h3>重要跟进记录</h3>
				<div v-if="imps && imps.length">
					<table class="follow-up-table">
						<thead>
							<tr>
								<th>时间</th>
								<th>内容</th>
								<th>跟进状态</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="record in imps" :key="record.id">
								<td>{{ record.time }}</td>
								<td>{{ record.content }}</td>
								<td>{{ record.type === 0 ? '未跟进' : '已跟进' }}</td>
		
							</tr>
						</tbody>
					</table>
				</div>
				<div v-else>
					<p>暂无重要跟进记录。</p>
				</div>
				<button class="cancel-btn" @click="closeFollowUpModal">关闭</button>
			</div>
		</div>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>


	<script>
        var agentId=localStorage.getItem('agentId')
		var schoolId=top_params().id;
		Vue.component('v-select', VueSelect.VueSelect);
		var app = new Vue(merge({
			data: {
				schools: [],
				promoters:[],
				peoples:[],
				courses:[],
				dataSource: null,
				dataStatus: null,
				dataIntent: null,
				selectedDataSourceIndex: null, // 添加这里
				selectedDataStatusIndex: null,   // 添加这里
				selectedDataIntentIndex: null,    // 添加这里
				urls: {
					del: '/pc/student/del'
				},
				important: {
					content: '',
					date: '',

				},
				popup: false,
				toPeopleId: null,
				boundShow: false,
				shownStudent: null,
				isModalVisible: false,
				isFollowUpModalVisible: false,
				studentBy: '',
				imps:[],

			},
			created: function () {
				var id = top_params().id;
				if (!id) return;
				this.schoolId = id
				this.urls.list = '/pc/student/lista?schoolId=' + id;
				this.urls.imports = '/pc/student/import/' + agentId;
				this.getData();

				axios.get('/pc/category/' + agentId).then(function (res) {
					this.dataSource = res.data.dataSource;
					this.dataStatus = res.data.dataStatus;
					this.dataIntent = res.data.dataIntent;
				}.bind(this));
				axios.get('/pc/staffUser/all/' + agentId).then(function (res) {
					this.promoters = res.data;
					this.peoples = res.data;
				}.bind(this));
				axios.get('/pc/course/all/' + agentId).then(function (res) {
					this.courses=res.data
				}.bind(this));
				abled('admissionInformation', this);

			},

			methods: {
				closeFollowUpModal (){
					this.isFollowUpModalVisible=false
				},
				showAddFollowUpModal(studentId) {
					this.studentBy = studentId;
					this.important = { content: '', date: '' }; // 清空输入
					this.isModalVisible = true;
				},
				closeAddFollowUpModal() {
					this.isModalVisible = false;
				},
				submitFollowUp: function () {
					var payload = {
						studentId: this.studentBy,
						content: this.important.content,
						time: this.important.date,
					};
					axios.post("/pc/importantFollowUp", payload)
						.then(({ data }) => {
							this.getData();
							alert('跟进记录已成功提交');
							this.isModalVisible = false;
							this.oneOrder = ''
						})
						.catch((error) => {

							alert(error.msg);
						});
				},
				viewFollowUp(id){
					//获取学生的重要记录
					axios.get('/pc/importantFollowUp/' + id).then(function (res) {
							this.imps = res.data
							this.isFollowUpModalVisible=true
							console.log(this.imps,111);
						}.bind(this));
					
				},
				fetchCourses:function(){
					if(this.search.schoolId){
						axios.get('/pc/course/all/' + this.search.schoolId).then(function (res) {
					this.courses=res.data
				}.bind(this));
					}else{
						this.courses = [];
					}
					
				},
				exports: function () {
					var q = Qs.stringify(this.search);
					if (q) q = '&' + q;

					location.href = '/pc/student/export?schoolId=' + schoolId + q;
				},
				unbind: function (student, type) {
					if (!confirm('确定解除此绑定吗？')) return;
					axios.post('/pc/student/unbind/' + student.id + '/' + type).then(function (res) {
						student.accounts.splice(type, 1, null);
					});
				},
				getImg: function (pic) {
					if (!pic) return null;
					return '/static/' + this.schoolId + '/student/' + pic;
				},
				account: function (student, type, field) {
					var account = student.accounts[type];
					if (!account) return null;
					return account[field];
				},
				bindCount: function (student) {
					return student.accounts.filter(function (it) {
						return it;
					}).length;
				},
				bindClick: function (student) {
					this.shownStudent = student;
					this.boundShow = true;
				},
				nickname: function (student, type) {
					return this.account(student, type, 'nickname');
				},
				headimgurl: function (student, type) {
					var headimgurl = this.account(student, type, 'headimgurl');
					if (headimgurl) headimgurl = headimgurl.replace('http://', 'https://');
					return headimgurl;
				},
				phone: function (student, type) {
					return this.account(student, type, 'phone');
				},
				avatar: function (student, type) {
					var pic = this.account(student, type, 'avatar');
					if (!pic) return null;
					return '/static/' + this.schoolId + '/binding/' + pic;
				},
				changeClasses: function () {
					if (this.checkedIds.length === 0) {
						alert('请选择至少1个');
						return;
					}
					this.popup = true;
				},
				sure: function () {
					if (!this.toPeopleId) {
						alert('请选择班级');
						return;
					}

					axios.put('/pc/student/people/' + this.toPeopleId, this.checkedIds).then(function (res) {
						this.getData();
						this.popup = false;
						alert('分配成功');
					}.bind(this));
				}
			},
			watch: {
				selectedDataSourceIndex: function (e) {

					var data = this.dataSource.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataSource = data[0]

				},
				selectedDataStatusIndex: function (e) {

					var data = this.dataStatus.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataStatus = data[0]

				},
				selectedDataIntentIndex: function (e) {

					var data = this.dataIntent.filter((item, i) => {
						if (i == e) {
							return item;
						}
					})
					this.search.dataIntent = data[0]

				}
			}
			

		}));
	</script>

</body>

</html>